<template>
  <el-container class="news">
    <el-header>
      <el-date-picker value-format="yyyy-MM-dd" v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @blur='sureTime'>
      </el-date-picker>
      <el-button type="primary" @click="$router.push('/news/addNews/0')" icon="el-icon-edit" size="small" class="fr">发布新闻</el-button>
    </el-header>
    <el-main>
      <div class="news_total">
        <img src="~/static/images/blue-spot.png" alt=""> 新闻总数:{{ecpNewsInfo.total}}
      </div>
      <el-table
      :data="ecpNewsInfo.list"
      tooltip-effect="dark"
      style="width: 100%">
      <el-table-column
        width="80"
        prop="id"
        label="ID">
      </el-table-column>
      <el-table-column width="40">
        <template slot-scope="scope">
          <img style="vertical-align: middle;width: 100%;" v-show="scope.row.stick" src="~/static/images/button_settop_default.png">
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        :show-overflow-tooltip="true"
        label="新闻名称">
      </el-table-column>
      <el-table-column
        label="新闻分类">
        <template slot-scope="scope">{{ scope.row.type=='POLICY_NEWS'?'政策新闻':'行业动态' }}</template>
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="发布时间">
      </el-table-column>
      <el-table-column
        prop="countNumber"
        label="浏览次数">
      </el-table-column>
      <el-table-column
        width="220"
        :show-overflow-tooltip="true"
        label="新闻分类">
        <template slot-scope="scope">
          <el-button round size="mini" @click.native="setTop(scope.row.id)" v-if="!scope.row.stick">置顶</el-button>
          <el-button round size="mini" v-else @click.native="cancelTop(scope.row.id)" :class="{setTop:scope.row.stick}">取消</el-button>
          <el-button round size="mini" @click="$router.push(`/news/addNews/${scope.row.id}`)">编辑</el-button>
          <el-button round size="mini" @click.native="delGoods(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" v-if="cur_length>0">
            <el-pagination layout="prev, pager, next" :current-page='pageNum' :total="ecpNewsInfo.totalNum*10" @current-change="getNewsList">
            </el-pagination>
        </div>
    </el-main>
  </el-container>
</template>
<style lang="scss" scoped>
.news {
  & /deep/ {
    .el-header {
      padding: 33px 100px 56px 26px;
      border-bottom: 1px solid #eee;
      .el-range-separator {
        width: 6%;
      }
    }
    .el-main {
      padding: 20px 0;
      .news_total {
        img {
          width: 15px;
          height: 15px;
          vertical-align: middle;
          margin-left: 26px;
        }
      }
      .el-table{
        thead .cell{
          color:#1b8bfd;
        }
        .cell{
          text-align:center;
        }
        td{
          border:none;
        }
         & /deep/ {
          .el-button--small.is-round {
              padding: 9px 13px;
          }
        }
      }
      .setTop{
        background:#1b8bfd;color:#fff
      }
      .pagination {
        margin-top: 50px;
        text-align: center;
        & /deep/ {
          .el-pager li,
          .btn-next,
          .btn-prev {
            font-size: 20px !important;
          }
          .el-icon-arrow-left:before,
          .el-icon-arrow-right:before {
            content: "\E606" !important;
            font-size: 20px;
          }
          .el-icon-arrow-right {
            transform: rotate(180deg);
          }
          .el-icon-arrow-right:hover {
            color: #1f8cfc;
          }
          .el-pager li.active {
            color: #1f8cfc;
          }
        }
      }
    }
  }
}
</style>
<script>
import { getEcpNewsList,deleteEcpNews,stickEcpNews,cancelStickEcpNews} from "~/api/";
export default {
  data() {
    return {
      time: "",
      cur_length: 0,
      startTime:'',
      endTime:'',
      pageNum: 1, //默认显示第几页
      pageSize: 10, //条数
      ecpNewsInfo:{}
    };
  },
  beforeMount() {
    this.getNewsList(this.pageNum)
  },
  methods: {
    async getNewsList(pageNum) {
      const res = await getEcpNewsList(this,this.startTime,this.endTime,pageNum,this.pageSize);
      if (res.code === "0") {
          this.ecpNewsInfo=res.data.page
          this.cur_length = res.data.page.list.length;
          this.pageNum=pageNum
      }else{
        this.$message.error(res.message);
      }
    },
    async delGoods(id) {
      const res = await deleteEcpNews(this, id);
      if (res.code === "0") {
        this.$message.success("删除成功");
        this.getNewsList(1)
      } else {
        this.$message.error(res.message);
      }
    },
    async setTop(id){
      const res = await stickEcpNews(this, id);
      if (res.code === "0") {
        this.$message.success("置顶成功");
        this.getNewsList()
      } else {
        this.$message.error(res.message);
      }
    },
    async cancelTop(id){
      const res = await cancelStickEcpNews(this, id);
      if (res.code === "0") {
        this.$message.success("取消置顶成功");
        this.getNewsList(1)
      } else {
        this.$message.error(res.message);
      }
    },
    sureTime(){
      this.startTime=this.time[0]
      this.endTime=this.time[1]
      this.getNewsList(1)
    }
  }
};
</script>


